<template>
    <view>
        <!-- <navigation-bar :back="true" title="我的圈子"></navigation-bar> -->
        <navigation-bar :back="true" title="我的发布"></navigation-bar>
        <view v-if="loginStatus == false" style="color: rgb(165, 165, 165); text-align: center; margin-top: 250rpx" @tap="handleLoginConfirm">
            登录后查看，点击前往登录~
        </view>
        <view class="b1" v-if="loginStatus==true&&forumData.length != 0">
            <view @tap="goToForumDetail" :data-data="item" v-for="(item, index) in forumData" :key="index">
                <view class="qz1">
                    <view class="qz2">
                        <view class="qz3">
                            <view class="qz4"><image class="qz5" :src="item.head"></image></view>
                            <view class="qz6">
                                <view class="qz7">{{ item.name }}</view>
                                <view class="qz8">
                                    <view class="qz9">{{ item.createTime }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="qz11"><image src="/static/images/qz1.png"></image></view>
                    </view>
                    <view class="qz12">{{ item.title }}</view>
                    <view class="qz13">{{ item.content }}</view>
                    <view class="qz14" v-if="item.image && item.image.length > 0">
                        <view class="qz15" v-for="(urls, index1) in item.image" :key="index1">
                            <image :src="urls" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="qz16">
                        <view class="qz17">{{ item.gamename }}</view>
                        <view class="qz18" v-if="item.tag1">#{{ item.tag1 }}</view>
                        <view class="qz18" v-if="item.tag2">#{{ item.tag2 }}</view>
                        <view class="qz18" v-if="item.tag3">#{{ item.tag3 }}</view>
                    </view>
                    <view class="qz19">
                        <view class="qz20">
                            <image src="/static/images/qz4.png" class="qz22"></image>
                            <view class="qz23">{{ item.num1 }}</view>
                        </view>
                        <view class="qz21">
                            <view class="qz20">
                                <image src="/static/images/qz2.png" class="qz22"></image>
                                <view class="qz23">{{ item.num2 }}</view>
                            </view>
                            <view class="qz20" style="margin-left: 40rpx">
                                <image src="/static/images/qz3.png" class="qz22"></image>
                                <view class="qz23">{{ item.num3 }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view style="margin-top: 30rpx; text-align: center; color: var(--GColor); display: flex; align-items: center">
                <view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
                <view style="padding: 0 15rpx">没有更多了</view>
                <view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
            </view>
            <view style="height: 50rpx; margin-top: 50rpx"></view>
        </view>

        <view v-else-if="loginStatus==true">
            <view style="color: rgb(165, 165, 165); text-align: center; margin-top: 250rpx">您还没有发过任何一个帖子</view>
            <view style="color: rgb(165, 165, 165); text-align: center">赶紧去发布吧！</view>
        </view>
    </view>
</template>

<script>
import { getForum,getForumMe } from '../../api/getApi';
import globalStore from '../../store/global';
import {addForumViewAdd} from '../../api/getApi';
export default {
    data() {
        return {
            loginStatus: globalStore.getLoginStype(),
            forumData: [],
            urls: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad() {
        this.loginStatus = globalStore.getLoginStype();
        this.getForumMeMethod();
        /* getForum({
            page: 1,
            limit: 50,
            openid: uni.getStorageSync('openId')
        }).then((res) => {
            console.log(res);
            res.data.list.forEach((element) => {
                if (element.image) {
                    element.image = element.image.split(',');
                }
            });
            this.setData({
                forumData: res.data.list
            });
        }); */
        //获取个人帖子
        
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getForumMeMethod();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getForumMeMethod() {
            getForumMe({
                page: 1,
                limit: 50,
            }).then((res) => {
                // console.log(res);
                res.data.list.forEach((element) => {
                    if (element.image) {
                        element.image = element.image.split(',');
                    }
                });
                this.setData({
                    forumData: res.data.list
                });
            });
        },
        // 跳转帖子详情
        goToForumDetail(e) {
            let data = e.currentTarget.dataset.data;
            uni.setStorageSync('forumDetail', JSON.stringify(data));
            // 帖子浏览量+1
            addForumViewAdd(data.id);
            uni.navigateTo({
                url: '/pages/forumDetail/forumDetail'
            });
        },
        
		handleLoginConfirm() {
			uni.navigateTo({
				// 跳进登录页面
				url: '/pages/login/login'
			});
		},
    }
};
</script>
<style>
.b1 {
    padding: 40rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    padding-top: 0rpx;
    overflow: auto;
}
.b2 {
    display: flex;
    word-break: keep-all;
    overflow-y: auto;
    border-bottom: 3rpx solid #e0e0e0;
    margin-bottom: 25rpx;
    min-height: 70rpx;
}

.b3 {
    margin-right: 48rpx;
    height: 45rpx;
    text-align: center;
    line-height: 45rpx;
    padding: 5rpx 0rpx;
    border-radius: 150rpx 50rpx 30rpx 30rpx;
    font-size: 30rpx;
    color: var(--Color);
    font-weight: 600;
    margin-bottom: 20rpx;
    border-bottom: 4rpx solid var(--Color);
}

.b4 {
    margin-right: 48rpx;
    height: 45rpx;
    text-align: center;
    line-height: 45rpx;
    padding: 5rpx 0rpx;
    border-radius: 100rpx;
    font-size: 30rpx;
    color: var(--GColor);
    margin-bottom: 20rpx;
}
.push4 {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
}
.push5 {
    font-weight: bold;
    font-size: 30rpx;
}
.push11 {
    display: flex;
    align-items: center;
}
.push12 {
    background: #ededed;
    border-radius: 10rpx;
    width: max-content;
    padding: 13rpx 28rpx;
    color: black;
    font-size: 24rpx;
    margin: 0 18rpx 18rpx 0;
}
.push13 {
    border-radius: 10rpx;
    width: max-content;
    padding: 11rpx 26rpx;
    font-size: 24rpx;
    margin: 0 18rpx 18rpx 0;
    border: 2rpx solid var(--LColor50);
    color: var(--Color);
    background: var(--LColor20);
}

.qz1 {
    display: flex;
    flex-direction: column;
    padding: 25rpx;
    border-radius: 25rpx;
    background: white;
    margin-bottom: 30rpx;
}
.qz2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qz3 {
    display: flex;
    flex: 1;
}
.qz4 {
    width: 85rpx;
    height: 85rpx;
    border-radius: 100%;
}
.qz5 {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.qz6 {
    display: flex;
    flex-direction: column;
    margin-left: 25rpx;
    justify-content: space-around;
}
.qz7 {
    font-weight: blod;
    font-size: 30rpx;
}
.qz8 {
    display: flex;
    font-size: 24rpx;
    color: gray;
}
.qz9 {
    margin-right: 5rpx;
}
.qz10 {
    margin-left: 30rpx;
}
.qz11 {
    width: 40rpx;
    height: 40rpx;
}
.qz11 > image {
    width: 100%;
    height: 100%;
}
.qz12 {
    font-size: 32rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 20rpx 0;
}
.qz13 {
    font-size: 27rpx;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15rpx;
}
.qz14 {
    display: flex;
    gap: 20rpx;
    padding: 10rpx 0;
    flex-wrap: wrap;
}
.qz15 {
    width: 190rpx;
    height: 190rpx;
    object-fit: cover;
    border-radius: 15rpx;
    background: #f5f5f5;
}
.qz15 > image {
    width: 100%;
    height: 100%;
    border-radius: 15rpx;
}
.qz16 {
    display: flex;
    align-items: center;
    margin-top: 25rpx;
    flex-wrap: wrap;
}
.qz17 {
    color: gray;
    font-size: 25rpx;
}
.qz18 {
    margin-left: 25rpx;
    font-size: 23rpx;
    border: 2rpx solid var(--LColor50);
    padding: 7rpx 15rpx;
    border-radius: 30rpx;
    color: var(--Color);
    background: var(--LColor20);
}
.qz19 {
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 5rpx;
}
.qz20 {
    display: flex;
    align-items: flex-end;
}
.qz21 {
    display: flex;
}
.qz22 {
    width: 30rpx;
    height: 30rpx;
}
.qz23 {
    color: gray;
    font-size: 25rpx;
    margin-left: 15rpx;
}
</style>
